<!--
 * @Author: CC-TSR
 * @Date: 2021-01-08 08:57:20
 * @LastEditTime: 2021-12-21 11:19:27
 * @LastEditors: xiejiancheng1999@qq.com
 * @Description: 
 * @FilePath: \人员轨迹\src\views\OneMap.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->
<template>
	<div class="mainMapTree">
		<Modal
			v-show="false"
			class="my-sider"
			v-model="isCollapsed"
			:width="siderWidth"
			:mask="false"
			:transfer="false"
			footer-hide
			:styles="{
        left: '-50%',
        top: '105px',
        transform: 'translateX(56%)',
      }"
			:closable="false"
		>
			<div class="header" slot="header">
				<h3>
					<Icon type="md-menu" />人员目录
				</h3>
				<h3 style="color: rgb(189, 184, 178); margin-right: 2rem; cursor: pointer">
					<Icon type="ios-star" size="15" />收藏夹
				</h3>
				<span style="color: rgb(189, 184, 178); font-size: 5px">
					<i-switch v-model="isShow" true-color="rgb(0,105,131)">
						<span slot="open">开</span>
						<span slot="close">关</span>
					</i-switch>
				</span>
			</div>
			<transition name="normal-expand">
				<div v-show="isShow" :width="siderWidth" class="panal-content">
					<component :is="siderPanel" @showPeople="isShowAddPeopleDialog=true" @getPhoneId="getPhoneId" @showMap="getMapState"></component>
					<div slot="footer"></div>
				</div>
			</transition>
		</Modal>
		<Modal @on-ok="addTrail" v-model="isShowDrawTrailDialog" draggable :width="320" :styles="{
			top: '105px', left: '-22%'
		}">
			<div class="header" slot="header">
				<h3>
					<Icon type="md-menu" />添加轨迹
				</h3>
			</div>
			<Form :model="trailFrom" :label-width="80">
				<Form-item label="轨迹编号">
					<Input v-model="trailFrom.id" placeholder="请输入轨迹编号"></Input>
				</Form-item>
				<Form-item label="轨迹名称">
					<Input v-model="trailFrom.name" placeholder="请输入轨迹名称"></Input>
				</Form-item>
				<Form-item label="采集日期">
					<Row>
						<Col span="11">
							<Date-picker type="date" placeholder="选择日期" v-model="trailFrom.remark1"></Date-picker>
						</Col>
					</Row>
				</Form-item>
				<Form-item label="备份字段2">
					<Input v-model="trailFrom.remark2" placeholder="请输入"></Input>
				</Form-item>
				<Form-item>
					<Button type="primary" @click="drawTrail" shape="circle" icon="md-pulse">绘制轨迹</Button>
				</Form-item>
			</Form>
		</Modal>

		<Modal @on-ok="addPeople" v-model="isShowAddPeopleDialog" :width="500" :transfer="false" :styles="{
       
      }" :closable="true">
			<div class="header" slot="header">
				<h3>
					<Icon type="md-menu" />添加人员
				</h3>
			</div>
			<div>
				<Form :model="peopleFormItem" :label-width="80">
					<Form-item label="姓名">
						<Input v-model="peopleFormItem.name" placeholder="请输入姓名"></Input>
					</Form-item>
					<Form-item label="身份证号">
						<Input v-model="peopleFormItem.identity" placeholder="请输入身份证号"></Input>
					</Form-item>
					<Form-item label="imis号">
						<Input v-model="peopleFormItem.imis" placeholder="请输入imis号"></Input>
					</Form-item>
					<Form-item label="手机号">
						<Input v-model="peopleFormItem.phone" placeholder="请输入手机号"></Input>
					</Form-item>
					<Form-item label="运营商">
						<Select v-model="peopleFormItem.operator" placeholder="请选择">
							<Option value="beijing">移动</Option>
							<Option value="shanghai">电信</Option>
							<Option value="shenzhen">联通</Option>
						</Select>
					</Form-item>
					<Form-item label="类别">
						<Select v-model="peopleFormItem.type" placeholder="请选择">
							<Option value="beijing">A</Option>
							<Option value="shanghai">B</Option>
						</Select>
					</Form-item>
					<Form-item label="工信部类别">
						<Select v-model="peopleFormItem.mittype" placeholder="请选择"></Select>
					</Form-item>
					<Form-item label="风险来源">
						<Select @on-change="v=> updateCityOption(v,'riskreCityOptions')" style="width:100px" v-model="peopleFormItem.riskreshen" placeholder="请选择省">
							<Option v-for="(item,index) in provinceList" :key="index" :value="item.label">{{item.label}}</Option>
						</Select>
						<Select
							@on-change="v=> updateOriginOption(v,'riskreCityOptions','riskerOriginOptions')"
							style="width:100px"
							v-model="peopleFormItem.riskreshi"
							placeholder="请选择市"
						>
							<Option v-for="(item,index) in riskreCityOptions" :key="index" :value="item.label">{{item.label}}</Option>
						</Select>
						<Select style="width:100px" v-model="peopleFormItem.riskrezone" placeholder="请选择区域">
							<Option v-for="(item,index) in riskerOriginOptions" :key="index" :value="item.label">{{item.label}}</Option>
						</Select>
					</Form-item>
					<Form-item label="归属地">
						<Select @on-change="v=> updateCityOption(v,'cityOptions')" style="width:100px" v-model="peopleFormItem.sheng" placeholder="请选择省">
							<Option v-for="(item,index) in provinceList" :key="index" :value="item.label">{{item.label}}</Option>
						</Select>
						<Select style="width:100px" v-model="peopleFormItem.shi" placeholder="请选择市">
							<Option v-for="(item,index) in cityOptions" :key="index" :value="item.label">{{item.label}}</Option>
						</Select>
					</Form-item>
					<Form-item label="基站位置">
						<Select @on-change="v=> updateCityOption(v,'stationCityOptions')" style="width:100px" v-model="peopleFormItem.stationshi" placeholder="请选择省">
							<Option v-for="(item,index) in provinceList" :key="index" :value="item.label">{{item.label}}</Option>
						</Select>
						<Select
							@on-change="v=> updateOriginOption(v,'stationCityOptions','stationOriginOptions')"
							style="width:100px"
							v-model="peopleFormItem.stationxia"
							placeholder="请选择市"
						>
							<Option v-for="(item,index) in stationCityOptions" :key="index" :value="item.label">{{item.label}}</Option>
						</Select>
						<Select style="width:100px" v-model="peopleFormItem.stationadd" placeholder="请选择区域">
							<Option v-for="(item,index) in stationOriginOptions" :key="index" :value="item.label">{{item.label}}</Option>
						</Select>
					</Form-item>
					<Form-item label="漫游位置">
						<Select @on-change="v=> updateCityOption(v,'flowCityOptions')" style="width:100px" v-model="peopleFormItem.flowsheng" placeholder="请选择省">
							<Option v-for="(item,index) in provinceList" :key="index" :value="item.label">{{item.label}}</Option>
						</Select>
						<Select style="width:100px" v-model="peopleFormItem.flowshi" placeholder="请选择市">
							<Option v-for="(item,index) in flowCityOptions" :key="index" :value="item.label">{{item.label}}</Option>
						</Select>
					</Form-item>
					<Form-item label="基站采集日期">
						<Row>
							<Col span="11">
								<Date-picker type="date" placeholder="选择日期" v-model="peopleFormItem.date"></Date-picker>
							</Col>
						</Row>
					</Form-item>
					<!--
					<Form-item label="单选框">
						<Radio-group v-model="peopleFormItem.radio">
							<Radio label="male">男</Radio>
							<Radio label="female">女</Radio>
						</Radio-group>
					</Form-item>
					<Form-item label="多选框">
						<Checkbox-group v-model="peopleFormItem.checkbox">
							<Checkbox label="吃饭"></Checkbox>
							<Checkbox label="睡觉"></Checkbox>
							<Checkbox label="跑步"></Checkbox>
							<Checkbox label="看电影"></Checkbox>
						</Checkbox-group>
					</Form-item>
					<Form-item label="开关">
						<Switch v-model="peopleFormItem.switch" size="large">
							<span slot="open">开启</span>
							<span slot="close">关闭</span>
						</Switch>
					</Form-item>
					<Form-item label="滑块">
						<Slider v-model="peopleFormItem.slider" range></Slider>
					</Form-item>
					<Form-item label="文本域">
						<Input v-model="peopleFormItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
					</Form-item>-->
					<!-- <Form-item>
						<Button type="primary">提交</Button>
						<Button type="ghost" style="margin-left: 8px">取消</Button>
					</Form-item>-->
				</Form>
			</div>
		</Modal>

		<mainMap v-if="isShowMap"></mainMap>
	</div>
</template>
<script>
import layerTree from "../components/MapTree/LayerTree.vue";
import lineCheckSider from "../components/MapTree/LineCheckSider";
import mainMap from "../components/MapTree/MainMap.vue";
import Graphic from "@arcgis/core/Graphic";
import Draw from "@arcgis/core/views/draw/Draw";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import { mapState, mapActions } from "vuex";
import Bus from "@/bus";
import addressJSON from "@/assets/common/address.json";
export default {
	name: "oneMap",
	components: {
		layerTree,
		mainMap,
		lineCheckSider,
	},
	created() {
		Bus.$on("changeSiderWidth", (target) => {
			this.siderWidth = target;
		});
	},
	data() {
		return {
			isShowMap: true,
			isCollapsed: true,
			siderWidth: 340,
			isShow: true,
			isShowAddPeopleDialog: false,
			isShowDrawTrailDialog: false,
			provinceList: [],
			cityList: [],
			originList: [],
			riskreCityOptions: [{ label: "sda", value: "dsa" }],
			flowCityOptions: [],
			stationCityOptions: [],
			cityOptions: [], // 市下拉框数据
			riskerOriginOptions: [],
			stationOriginOptions: [],
			originOptions: [], // 区下拉框数据
			peopleFormItem: {
				name: "",
				identity: "",
				imis: "",
				phone: "",
				operator: "",
				riskreshen: "",
				riskreshi: "",
				riskrezone: "",
				stationshi: "",
				stationxia: "",
				stationadd: "",
				type: "",
				mittype: "",
				belongProvince: "",
				belongCity: "",
				belongArea: "",
				flowsheng: "",
				flowshi: "",
				roamArea: "",
				date: "",
				// radio: "male",
				// checkbox: [],
				// switch: true,
				// date: "",
				// time: "",
				// slider: [20, 50],
				// textarea: "",
			},
			trailFrom: {
				id: "",
				phone: "",
				name: "",
				remark1: "", // 采集日期字段
				remark2: "",
				remark3: ""
			}
		};
	},
	computed: {
		...mapState("oneMap", ["siderPanel", "view", "map"]),
	},
	watch: {
		siderPanel: function () {
			let self = this;
			this.$nextTick(self.getHeight());
		},
	},
	methods: {
		...mapActions(["ReloadPeopleInfo"]),
		getPhoneId(phoneId) {
			if (phoneId) {
				console.log(phoneId);
				this.trailFrom.phone = phoneId;
				this.isShowDrawTrailDialog = true;
			}
		},
		updateCityOption(val, cityOptions) {
			this.provinceList.forEach((province) => {
				if (val.toString() === province.label) {
					this[cityOptions] = province.children;
				}
			});
		},
		updateOriginOption(val, cityOptions, originOptions) {
			this[cityOptions].forEach((city) => {
				if (val.toString() === city.label) {
					this[originOptions] = city.children;
					//如果选中市之后默认区选中
					// this.valueOrigin = this.cityList[index].children[0].value
				}
			});
		},
		initAddressData() {
			let addressData = JSON.parse(JSON.stringify(addressJSON));

			this.provinceList = [];
			this.cityList = [];
			this.originList = [];
			addressData.forEach((item) => {
				if (item.value.match(/0000$/)) {
					this.provinceList.push({
						value: item.value,
						label: item.name,
						children: [],
					});
				} else if (item.value.match(/00$/)) {
					this.cityList.push({
						value: item.value,
						label: item.name,
						children: [],
					});
				} else {
					this.originList.push({
						value: item.value,
						label: item.name,
					});
				}
			});
			for (let index in this.provinceList) {
				for (let index1 in this.cityList) {
					if (
						this.provinceList[index].value.slice(0, 2) ===
						this.cityList[index1].value.slice(0, 2)
					) {
						this.provinceList[index].children.push(this.cityList[index1]);
					}
				}
			}
			for (let item1 in this.cityList) {
				for (let item2 in this.originList) {
					if (
						this.originList[item2].value.slice(0, 4) ===
						this.cityList[item1].value.slice(0, 4)
					) {
						this.cityList[item1].children.push(this.originList[item2]);
					}
				}
			}
		},

		
		addPeople() {
			let point = {
				type: "point", // autocasts as new Point()
				longitude: -71.2643,
				latitude: 42.0909,
			};
			const addFeature = new Graphic({
				geometry: point,
				attributes: this.peopleFormItem,
			});

			// or specify globalIds of features to be deleted
			// const deleteFeature = [
			//  { globalId: "18633204-1801-4d35-a73a-174563608ad9" }
			// ];
			let self = this;
			this.$commonLayers.peopleLayer
				.applyEdits({
					addFeatures: [addFeature],
				})
				.then((res) => {
					console.log(res)
					self.ReloadPeopleInfo();
				});
		},
		
		getMapState(data) {
			this.isShowMap = data;
		},
		getHeight() {
			let self = this;
			this.$nextTick(() => {
				self
					.$(".panal-content")
					.css("height", window.innerHeight - 177)
					.css("background-color", "rgb(255, 255, 255)");
			});
		},
		addTrail(){
			console.log(this.view.graphics.items[0])
			let self = this;
			this.$commonLayers.trailLayer
				.applyEdits({
					addFeatures: [this.view.graphics.items[0]],
				})
				.then((res) => {
					console.log(res)
					if(res.addFeatureResults.length > 0){
						self.$Message.info("新增轨迹成功");
					} else {
						self.$Message.error("新增轨迹失败");
					}
				})
				.catch((error) => {
					console.error();
				})
			// 清除
			this.view.graphics.removeAll();

			// 测试已插入数据
			// let query = this.$commonLayers.trailLayer.createQuery();
			// query.where = "phone = '19174049835'";
			// this.$commonLayers.trailLayer.queryFeatures(query).then(res => {
			// 	console.log(res.features)
			// })

		},
		drawTrail() {
			let self = this
			const draw = new Draw({
				view: self.view,
			});
			
			let lineAction = draw.create("polyline");
			lineAction.on("vertex-add", function (evt) {
				self.createPolylineGraphic(evt.vertices);
			});
			lineAction.on("vertex-remove", function (evt) {
				self.createPolylineGraphic(evt.vertices);
			})
			lineAction.on("cursor-update", function (evt) {
				self.createPolylineGraphic(evt.vertices);
			})
			lineAction.on("draw-complete", function (evt) {
				self.createPolylineGraphic(evt.vertices);
			})
		},
		createPolylineGraphic(vertices){
			this.view.graphics.removeAll();
			const polyline = {
				type: "polyline",
				paths: vertices,
				spatialReference: this.view.spatialReference
			};
			const graphic = new Graphic({
				geometry: polyline,
				symbol: {
					type: 'simple-line',
					color: [255, 69, 0],
					width: 3,
					cap: "round",
					join: "round"
				},
				attributes: this.trailFrom
			})
			this.view.graphics.add(graphic);
		}
	},
	mounted() {
		this.initAddressData();
		this.getHeight();
		this.$(window).resize(() => {
			this.getHeight();
		});
	},
};
</script>
<style lang='scss'>
// 这些略显混乱的css是因为他们采用的Iview框架的限制，加上我不太熟悉这些框架
// 这些Ivu开头的类 都是框架编译后自动生成的类，有些属性我并不想要，所以采用这种方式丢掉 或者改掉
.mainMapTree .my-sider .ivu-modal-body {
	height: 0 !important;
	padding: 0 !important;
}
.ivu-modal-header {
	background: rgb(2, 64, 85);
	padding: 0.5rem 5px !important;
	border-top-left-radius: 0.3rem;
	border-top-right-radius: 0.3rem;
	box-shadow: none !important;
}
.mainMapTree .my-sider .ivu-modal-content {
	box-shadow: 2px 2px 4px rgb(27, 32, 34);
	// height: calc(100vh - 130px);
}
</style>
<style  scoped>
.mainMapTree {
	height: 100%;
}
.layout {
	height: 100%;
}
.header {
	display: flex;
	justify-content: space-between;
	color: rgb(233, 238, 240);
	line-height: 30px;
	height: 30px;
}
.panal-content {
	overflow-y: auto;
}
.normal-expand-enter-active,
.normal-expand-leave-active {
	transition: all 0.8s ease-in-out;
}
.normal-expand-enter,
.normal-expand-leave-to {
	height: 0px !important;
	opacity: 0 !important;
}
</style>
